<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
  <div class="min-h-[1024px] bg-gray-50">
    <!-- 固定导航栏 -->
    <el-header class="fixed top-0 left-0 right-0 bg-white shadow-md z-50 p-0">
      <div
        class="max-w-[1440px] mx-auto h-16 flex items-center justify-between px-8"
      >
        <div class="flex items-center space-x-2">
          <!-- <el-icon class="text-2xl text-indigo-600"><InfoFilled /></el-icon> -->
          <span class="text-xl font-bold">初练音乐</span>
        </div>

        <el-menu mode="horizontal" class="border-0">
          <el-menu-item
            v-for="nav in navItems"
            :key="nav.name"
            :index="nav.name"
          >
            {{ nav.name }}
          </el-menu-item>
        </el-menu>

        <div class="flex items-center space-x-4">
          <el-input
            v-model="searchText"
            placeholder="搜索乐谱..."
            class="w-64"
            :prefix-icon="Search"
          />
          <!-- <el-button circle>
            <el-icon><User /></el-icon>
          </el-button> -->
          <el-button type="text" @click="login">登录</el-button>
          <el-button type="text" @click="signIn">注册</el-button>
        </div>
      </div>
    </el-header>

    <!-- Hero Banner -->
    <div class="pt-16">
      <div class="relative h-[500px] overflow-hidden">
        <el-carousel height="500px" :interval="5000">
          <el-carousel-item v-for="banner in banners" :key="banner.id">
            <div class="relative h-full">
              <el-image :src="banner.image" fit="cover" class="w-full h-full" />
              <div
                class="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent"
              >
                <div
                  class="max-w-[1440px] mx-auto px-8 h-full flex items-center"
                >
                  <div class="text-white max-w-lg">
                    <h1 class="text-5xl font-bold mb-4">{{ banner.title }}</h1>
                    <p class="text-lg mb-8">{{ banner.description }}</p>
                    <el-button
                      type="primary"
                      size="large"
                      class="!rounded-button whitespace-nowrap"
                    >
                      立即查看
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>

    <!-- 分类展示 -->
    <div class="max-w-[1440px] mx-auto px-8 py-16">
      <h2 class="text-3xl font-bold mb-12 text-center">热门分类</h2>
      <el-row :gutter="16">
        <el-col v-for="category in categories" :key="category.name" :span="4.8">
          <el-card
            class="h-full hover:scale-105 transition-transform duration-300"
            :body-style="{ padding: '0px' }"
          >
            <div class="h-48 overflow-hidden">
              <el-image
                :src="category.image"
                fit="cover"
                class="w-full h-full"
              />
            </div>
            <div class="p-6">
              <h3 class="text-xl font-bold mb-2">{{ category.name }}</h3>
              <p class="text-gray-600">{{ category.count }}份乐谱</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 最新乐谱 -->
    <div class="max-w-[1440px] mx-auto px-8 py-16 bg-white">
      <h2 class="text-3xl font-bold mb-12 text-center">最新乐谱</h2>
      <el-row :gutter="30">
        <el-col v-for="score in latestScores" :key="score.id" :span="6">
          <el-card :body-style="{ padding: '0px' }">
            <div class="h-48 overflow-hidden">
              <el-image :src="score.image" fit="cover" class="w-full h-full" />
            </div>
            <div class="p-4">
              <h3 class="font-bold mb-2">{{ score.title }}</h3>
              <p class="text-sm text-gray-600 mb-2">{{ score.artist }}</p>
              <div class="flex items-center justify-between">
                <el-tag size="small" type="info">{{ score.level }}</el-tag>
                <span class="text-sm text-gray-500">
                  <el-icon class="text-red-500"><StarFilled /></el-icon>
                  {{ score.likes }}
                </span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 底部功能区 -->
    <div class="max-w-[1440px] mx-auto px-8 py-16">
      <el-row :gutter="32">
        <el-col :span="12">
          <h3 class="text-xl font-bold mb-6">热门标签</h3>
          <div class="flex flex-wrap gap-2">
            <el-tag
              v-for="tag in tags"
              :key="tag"
              class="cursor-pointer"
              effect="plain"
            >
              {{ tag }}
            </el-tag>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 页脚 -->
    <el-footer class="bg-gray-900 text-white p-0">
      <div class="max-w-[1440px] mx-auto px-8 py-16">
        <el-row :gutter="32">
          <el-col :span="6">
            <h4 class="text-xl font-bold mb-4">关于我们</h4>
            <p class="text-gray-400"
              >音乐乐谱库致力于为音乐爱好者提供优质的乐谱资源，让每个人都能享受音乐的美好。</p
            >
          </el-col>
          <el-col :span="6">
            <h4 class="text-xl font-bold mb-4">联系方式</h4>
            <div class="space-y-2 text-gray-400">
              <p
                ><el-icon><Message /></el-icon> contact@musicsheet.com</p
              >
              <p
                ><el-icon><Phone /></el-icon> 400-123-4567</p
              >
            </div>
          </el-col>
          <el-col :span="6">
            <h4 class="text-xl font-bold mb-4">关注我们</h4>
            <div class="flex space-x-4">
              <el-button circle
                ><el-icon><ChatRound /></el-icon
              ></el-button>
              <el-button circle
                ><el-icon><Share /></el-icon
              ></el-button>
              <el-button circle
                ><el-icon><ChatDotRound /></el-icon
              ></el-button>
            </div>
          </el-col>
          <el-col :span="6">
            <h4 class="text-xl font-bold mb-4">友情链接</h4>
            <div class="space-y-2 text-gray-400">
              <p>音乐教育网</p>
              <p>乐器商城</p>
              <p>音乐资讯</p>
            </div>
          </el-col>
        </el-row>
        <div
          class="mt-8 pt-8 border-t border-gray-800 text-center text-gray-400"
        >
          <p>© 2024 音乐乐谱库 版权所有</p>
        </div>
      </div>
    </el-footer>

    <!-- 返回顶部 -->
    <el-backtop :right="20" :bottom="20" />
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';

  const router = useRouter();
  const searchText = ref('');
  const login = () => {
    // 跳转路由
    router.push({
      path: '/login',
      query: {
        tab: 'login',
      },
    });
  };
  const signIn = () => {
    router.push({
      path: '/login',
      query: {
        tab: 'sign',
      },
    });
  };
  const navItems = [
    { name: '乐队总谱' },
    { name: '吉他谱' },
    { name: '爵士鼓谱' },
    { name: '钢琴谱' },
    { name: '尤克里里谱' },
  ];

  const banners = [
    {
      id: 1,
      title: '发现你的专属乐谱',
      description: '海量乐谱资源，让你的音乐梦想触手可及',
      image:
        'https://ai-public.mastergo.com/ai/img_res/7663d8b947df4f129c4cfca7f5082390.jpg',
    },
    {
      id: 2,
      title: '专业乐谱教学',
      description: '从入门到精通，专业的乐谱指导',
      image:
        'https://ai-public.mastergo.com/ai/img_res/540c43ba4138c265811e7cb1fd44e0d5.jpg',
    },
  ];

  const categories = [
    {
      name: '乐队总谱',
      count: 2345,
      image:
        'https://ai-public.mastergo.com/ai/img_res/427a7197c53bccc31772c6886cbeb9e6.jpg',
    },
    {
      name: '吉他谱',
      count: 5678,
      image:
        'https://ai-public.mastergo.com/ai/img_res/be5c586d3ceef31e6a718e147ad01bcd.jpg',
    },
    {
      name: '爵士鼓谱',
      count: 1234,
      image:
        'https://ai-public.mastergo.com/ai/img_res/26cc513fc4d52befaf42772f372074b5.jpg',
    },
    {
      name: '钢琴谱',
      count: 4567,
      image:
        'https://ai-public.mastergo.com/ai/img_res/44999717cff0cea729fd362246cd99a3.jpg',
    },
    {
      name: '尤克里里谱',
      count: 890,
      image:
        'https://ai-public.mastergo.com/ai/img_res/16a183fac8b4c84d2a4552ad7573eb76.jpg',
    },
  ];

  const latestScores = [
    {
      id: 1,
      title: '月光奏鸣曲',
      artist: '贝多芬',
      level: '高级',
      likes: 2890,
      image:
        'https://ai-public.mastergo.com/ai/img_res/7fd0a8216d00ae9bf09db00cc4bedac3.jpg',
    },
    {
      id: 2,
      title: '春江花月夜',
      artist: '李云迪改编',
      level: '中级',
      likes: 1567,
      image:
        'https://ai-public.mastergo.com/ai/img_res/5ba7f2cf3ae4989c96e11da4060d7bd8.jpg',
    },
    {
      id: 3,
      title: '卡农',
      artist: '帕赫贝尔',
      level: '中级',
      likes: 3456,
      image:
        'https://ai-public.mastergo.com/ai/img_res/a68f3a2cc4756600a9286711e7e14b13.jpg',
    },
    {
      id: 4,
      title: '梦中的婚礼',
      artist: '理查德克莱德曼',
      level: '初级',
      likes: 2345,
      image:
        'https://ai-public.mastergo.com/ai/img_res/59284cc111ff18312e0f405378f81871.jpg',
    },
  ];

  const tags = [
    '古典音乐',
    '流行歌曲',
    '民谣',
    '爵士',
    '蓝调',
    '摇滚',
    '电子音乐',
    '世界音乐',
    '独奏曲',
    '协奏曲',
  ];

  const browsingHistory = [
    {
      id: 1,
      title: '梦中的婚礼',
      artist: '理查德克莱德曼',
      image:
        'https://ai-public.mastergo.com/ai/img_res/2737980d63bbf482c8972912b0183ede.jpg',
    },
    {
      id: 2,
      title: '卡农',
      artist: '帕赫贝尔',
      image:
        'https://ai-public.mastergo.com/ai/img_res/c2c4ac6b76e70a87e5cb68fbb0c195c9.jpg',
    },
  ];
</script>

<style scoped>
  .el-menu--horizontal {
    border-bottom: none !important;
  }

  .el-footer {
    --el-footer-padding: 0;
  }

  .el-carousel__item {
    overflow: hidden;
  }
</style>
